<template>
    <div class="refresh-warp" :class="inline ? 'inline' : 'block'">
        <p class="refresh-progress refresh-rotate" :style="{width: inlinePx2Rem(size), height: inlinePx2Rem(size)}"></p>
        <p class="refresh-tip" v-if="tip" :class="reload ? 'btn' : ''" @click="reloadFn">{{tipText}}</p>
    </div>
</template>

<script>
export default {
    props: {
        inline: {
            type: Boolean,
            default: true
        },
        tip: {
            type: String,
            default: ''
        },
        size: {
            type: Number,
            default: 20
        },
        reload: {
            type: Boolean,
            default: false
        }
    },
    computed: {
       tipText() {
           if (this.reload) {
               return '重新加载'
           } else {
            return this.tip
           }
       } 
    },
    data() {
       return {}
    },
    methods: {
        inlinePx2Rem(n) {
            let b = 1/37.5
            let r = n * b
            return r + 'rem'
        },
        reloadFn() {
            if (this.reload) {
                this.$emit('reloadFn', {
                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    size: 20 //每页数据条数,默认10
                })
            }
        }
    },
}
</script>
<style lang="less" scoped>
    .refresh-warp{
        &.inline{
            display: inline-block;
            vertical-align: middle;
        }
        &.block{
            min-height: 30px;
            padding: 15px 0;
            text-align: center;
        }
        .refresh-progress{
            display: block;
            margin: 0 auto;
            border-radius: 50%;
            border: 1px solid #456DE6;
            border-bottom-color: #EAEAEA;
        }
        .refresh-tip{
            margin-top: 3px;
            font-size: 12px;
            color: rgba(255,255,255,0.6);
            vertical-align: middle;
            &.btn{
                display: inline-block;
                margin-top: 8px;
                border: 1px solid #456DE6;
                border-radius: 2px;
                padding: 2px 5px;
                color: #456DE6;
            }
        }
        .refresh-rotate {
            -webkit-animation: mescrollRotate 0.6s linear infinite;
            animation: mescrollRotate 0.6s linear infinite;
        }
    }

     @-webkit-keyframes mescrollRotate {
        0% {
            -webkit-transform: rotate(0deg);
            -webkit-transform-origin:50% 50%;
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes mescrollRotate {
        0% {
            transform: rotate(0deg);
            -webkit-transform-origin:50% 50%;
        }
        100% {
            transform: rotate(360deg);
            transform-origin:50% 50%;
        }
    }
</style>